<link href="/bemigo/styles/main.css" rel="stylesheet" type="text/css">
<script src="http://connect.facebook.net/en_US/all.js"></script>
<html>
<body>
	<div id="header">
		<div class="container">
		<a href="/" id="headerLogo">Bemigo</a>
		<div id="headerDashboard">
			<img src='https://graph.facebook.com/<?php echo $this->user_id?>/picture?type=square' height="40" width="40" />
			<ul>
				<li><a href="/friends" id="friends">Friends</a></li>
				<li><a href="#" id="matches">Matches</a></li>
				<li><a href="#" id="messages">Messages</a></li>
				<li><a href="#" id="search">Search</a></li>
			</ul>
		</div>
			<!-- <div id="login"><a href="/index/logout" class="btnGray">Logout</a></div> -->
			<div id="fb-root"></div>
			<div class="clear"></div>
		</div>
	</div>
		<div class="container">
			<div class="a">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
			<div class="b">
				<div id="statusBar">
					<div id="s1" class="active">
						Step 1.
						<img src="/bemigo/images/bgs/statusBarArrow.png" />
					</div>
					<div id="s2">
						Step 2.
						<img src="/bemigo/images/bgs/statusBarArrow.png" />
					</div>
					<div id="s3">
						Step 3.
						<img src="/bemigo/images/bgs/statusBarArrow.png" />
					</div>
				</div>
					<h3><input id="friendSearch" type="text"></input></h3>
					<div class="panel">
						<table class="myTable">
							<tbody>
								<tr>
									<td class="myTable pR">
										<img src="http://southparkstudios-intl.mtvnimages.com/shared/sps/images/shows/southpark/vertical_video/import/season_06/sp_0611_11_v6.jpg?width=480" />
										<div class="friendListName">God Damn Mongorian</div>
									</td>
									<td class="myTable pRL">
										<img src="http://southparkstudios-intl.mtvnimages.com/shared/sps/images/shows/southpark/vertical_video/import/season_06/sp_0611_11_v6.jpg?width=480" />
										<div class="friendListName">God Damn Mongorian</div>
									</td>
									<td class="myTable pRL">
										<img src="http://southparkstudios-intl.mtvnimages.com/shared/sps/images/shows/southpark/vertical_video/import/season_06/sp_0611_11_v6.jpg?width=480" />
										<div class="friendListName">God Damn Mongorian</div>
									</td>
									<td class="myTable pRL">
										<img src="http://southparkstudios-intl.mtvnimages.com/shared/sps/images/shows/southpark/vertical_video/import/season_06/sp_0611_11_v6.jpg?width=480" />
										<div class="friendListName">God Damn Mongorian</div>
									</td>
									<td class="myTable pRL">
										<img src="http://southparkstudios-intl.mtvnimages.com/shared/sps/images/shows/southpark/vertical_video/import/season_06/sp_0611_11_v6.jpg?width=480" />
										<div class="friendListName">God Damn Mongorian</div>
									</td>
									<td class="myTable pL">
										<img src="http://southparkstudios-intl.mtvnimages.com/shared/sps/images/shows/southpark/vertical_video/import/season_06/sp_0611_11_v6.jpg?width=480" />
										<div class="friendListName">God Damn Mongorian</div>
									</td>
								</tr>
								<tr>
									<td class="myTable pR">
										<img src="http://southparkstudios-intl.mtvnimages.com/shared/sps/images/shows/southpark/vertical_video/import/season_06/sp_0611_11_v6.jpg?width=480" />
										<div class="friendListName">God Damn Mongorian</div>
									</td>
									<td class="myTable pRL">
										<img src="http://southparkstudios-intl.mtvnimages.com/shared/sps/images/shows/southpark/vertical_video/import/season_06/sp_0611_11_v6.jpg?width=480" />
										<div class="friendListName">God Damn Mongorian</div>
									</td>
									<td class="myTable pRL">
										<img src="http://southparkstudios-intl.mtvnimages.com/shared/sps/images/shows/southpark/vertical_video/import/season_06/sp_0611_11_v6.jpg?width=480" />
										<div class="friendListName">God Damn Mongorian</div>
									</td>
									<td class="myTable pRL">
										<img src="http://southparkstudios-intl.mtvnimages.com/shared/sps/images/shows/southpark/vertical_video/import/season_06/sp_0611_11_v6.jpg?width=480" />
										<div class="friendListName">God Damn Mongorian</div>
									</td>
									<td class="myTable pRL">
										<img src="http://southparkstudios-intl.mtvnimages.com/shared/sps/images/shows/southpark/vertical_video/import/season_06/sp_0611_11_v6.jpg?width=480" />
										<div class="friendListName">God Damn Mongorian</div>
									</td>
									<td class="myTable pL">
										<img src="http://southparkstudios-intl.mtvnimages.com/shared/sps/images/shows/southpark/vertical_video/import/season_06/sp_0611_11_v6.jpg?width=480" />
										<div class="friendListName">God Damn Mongorian</div>
									</td>
								</tr>
							</tbody>
						</table>
						<div id="friendsListHead"></div>
						<div id="chooseFriendDiv"></div>
					</div>
			</div>
			<div class="c">
				<h2>Sponsors</h2>
					<p>Ads go here</p>
			</div>
			<div class="clear"></div>
		</div>
<script>
YUI().use('node', 'event-custom', 'cache', 'json-parse', 'anim', 'autocomplete', 'autocomplete-filters', 'autocomplete-highlighters', function(Y) {
	//Initialize Facebook Javascript SDK
	FB.init({
	    appId  : '<?php echo $this->fb_app_id?>',
	    status : true, // check login status
	    cookie : true, // enable cookies
	    xfbml  : true  // parse XFBML
	  });

	//Check Facebook Login status. If not logged in display FB Login button; else trigger logged in event
	FB.getLoginStatus(function(response) {
		if (response.session) {
			Y.fire('fbuser:loggedin');
		}
	});

	//If user is logged in, display friends list
	Y.on('fbuser:loggedin', function(){
		var node = Y.one('#friendsListHead');
		node.setContent('<img src="/bemigo/images/ajax-loader.gif" />');
		var listNode = Y.one('#chooseFriendDiv');
		var friendsJson = '<?php echo str_replace("'", "\'", json_encode($this->user_friends))?>';

		try {
		    var friends = Y.JSON.parse(friendsJson);
		    var friendCount = friends.data.length;
		    if(friendCount > 0){
			   listNode.append("<ul id='chooseFriendList'>");
			   var innerNode = Y.one('#chooseFriendDiv ul');
			   //Append HTML to display images and names of friends as list items
				for(var i = friends.data.length - 1; i >= 0; --i) {
					var f = friends.data[i];
					innerNode.append("<li id='"+f.id+"' data-tags='"+f.name+"'>\
							<img src='https://graph.facebook.com/"+f.id+"/picture?type=square' height='60' width='60'></img>\
							<div>"+f.name+"</div>\
							<div class='clear'></div>\
							</li>");
					friendCount--;

					if(friendCount == 0){
						listNode.append("<div class='clear'></div></ul>");
						Y.fire('friend_list:full');
					}
				}
		    }

		    // Create a custom PieFilter class that extends AutoCompleteBase.
		    var FriendsFilter = Y.Base.create('friendsFilter', Y.Base, [Y.AutoCompleteBase], {
		      initializer: function () {
		        this._bindUIACBase();
		        this._syncUIACBase();
		      }
		    }),

		    // Create and configure an instance of the PieFilter class.
		    filter = new FriendsFilter({
		      inputNode: '#friendSearch',
		      minQueryLength: 0,
		      queryDelay: 0,

		      // Run an immediately-invoked function that returns an array of results to
		      // be used for each query, based on the photos on the page. Since the list
		      // of photos remains static, this saves time by not gathering the results
		      // for each query.
		      //
		      // If the list of results were not static, we could simply set the source
		      // to the function itself rather than invoking the function immediately,
		      // and it would then run on every query.
		      source: (function () {
		        var results = [];

		        // Build an array of results containing each photo in the list.
		        Y.all('#chooseFriendList > li').each(function (node) {
		          results.push({
		            node: node,
		            tags: node.getAttribute('data-tags')
		          });
		        });

		        return results;
		      }()), // <-- Note the parens. This invokes the function immediately.
		            //     Remove these to invoke the function on every query instead.

		      // Specify that the "tags" property of each result object contains the text
		      // to filter on.
		      resultTextLocator: 'tags',

		      // Use a result filter to filter the photo results based on their tags.
		      resultFilters: 'phraseMatch'
		    });

		    // Subscribe to the "results" event and update photo visibility based on
		    // whether or not they were included in the list of results.
		    filter.on('results', function (e) {
		      // First hide all the photos.
		      Y.all('#chooseFriendList > li').addClass('hidden');

		      // Then unhide the ones that are in the current result list.
		      Y.Array.each(e.results, function (result) {
		        result.raw.node.removeClass('hidden');
		      });
		    });

		}
		catch (e) {
		    Y.fire('display_error', e);
		}
	});

	Y.on('friend_list:full', function(){
		var myAnim = new Y.Anim({
		    node: '#friendsListHead',
		    to: { height: 0, opacity: 0 },
	        easing: Y.Easing.backIn
		});
		myAnim.run();
	});

	Y.on('click', function(e){
		if(confirm("Are you sure?")){
			$.ajax({
				url: 'mypage/addfriend',
				type: 'POST',
		        data: "format=json&fbid="+e._currentTarget.id+"&myid=<?php echo $this->user_id?>",
		        dataType: "json",
				success: function(data) {
					window.location = "/profile/index/relation_id/"+data.result;
				}
			});
		}
	}, 'ul#chooseFriendList li');

	//Display error in TBD error panel
	Y.on('display_error', function(e){
		alert("Invalid friends list data"+e);
	});

});
</script>
</body>
</html>